<template>
  <div class="article-box">
    <div class="flex-between">
      <div class="condation flex-box">
        <div class="condation-item">
          <div class="item-label"></div>
          <div class="item-select"><a-input-search style="width: 18rem" v-model="searchCondition.search" allow-clear
              @search="onQueryClk" placeholder="请输入车牌号/接收人/电话号码查询"  enter-button></a-input-search></div>
        </div>
        <div class="condation-item">
          <div class="item-label">通知类型</div>
          <div class="item-select">
            <a-select v-model="searchCondition.type" style="width: 10rem" @change="onQueryClk" allow-clear
              placeholder="不限">
              <a-select-option :key="item.value" v-for="(item) in notifyTypeList" :value="item.value">{{ item.label
                }}</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="condation-item">
          <div class="item-label">通知状态</div>
          <div class="item-select">
            <a-select style="width: 10rem" placeholder="不限" v-model="searchCondition.status" allowClear
              @change="onQueryClk">
              <a-select-option :key="item.key" :value="item.key" v-for="(item) in INFORMLIST">{{ item.title
                }}</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="condation-item">
        <a-button type="primary" @click="viewScanning" size="large">扫描情况</a-button>
        <a-button type="primary" @click="$router.push({name: 'NoteList'})" size="large">短信列表</a-button>
        <a-button type="primary" @click="$router.push({name: 'CommentList'})" size="large">评价列表</a-button>
      </div>
    </div>
    <div class="table-class">
      <a-table :columns="columns" :loading="tableLoading" bordered :pagination="false" :dataSource="tableData"
        :scroll="{ y:  365}" :customRow="returnRow">
        <template slot="createTime" slot-scope="row">
          {{ row | timeFilter('年月日时分') }}
        </template>
        <template slot="status" slot-scope="row">
          <a-tag v-for="(item, index) in INFORMLIST.filter((ele) => ele.key == row)" :key="index"
            :color="item.color">{{
  item.title }}</a-tag>
        </template>
        <template slot="receiver" slot-scope="row,text">
          {{ text.receiver }}
          <p class="white-space">{{ text.notifyObjectTelephone }}</p>
        </template>
        <template slot="licensePlateNumber" slot-scope="row,text">
          <div v-html="disopseData(text.licensePlateNumber)"></div>
        </template>
        <template slot="action" slot-scope="row,text">
          <span class="a-link" @click="viewDetail(text)">查看</span>
        </template>
      </a-table>
      <Pagination class="pagination" :loading.sync="tableLoading" :tableData.sync="tableData"
      :searchCondition="searchCondition" :apiRequestCallback="apiRequest"></Pagination>
    </div>
    <a-modal :visible="detailObj.show" :title="detailObj.title" :footer="false" @cancel="closeModal">
      <div class="flex-box modal-class">
        {{ this.detailObj.data.message }}
      </div>
    </a-modal>
    <!-- 扫描情况 -->
    <a-modal class="scan-class" :visible="scanObj.show" width="600px" title="扫描情况" :footer="false"
      @cancel="()=>closeScanObjModal()">
      <div class="body-header">
        <a-badge color="#40a9ff" text="已扫描"></a-badge>
      </div>
      <div class="grid-class" ref="scanningCondition">
        <div :class="['number-class', { 'scan-active': item.flag }]" v-for="item in scanObj.data.scanList"
          :key="item.value">
          {{
  item.value }}</div>
        <a-spin v-if="modalLoading"></a-spin>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Pagination from "@/components/pagination/index.vue";
import {
  apiMessageQuery,
  apiQuerySMSByMessageId,
  apiGetNotifyType,
  apiGetStatusInfo
} from "@/api/api.js";
const INFORMLIST = [
  {
    key: 0,
    title: '发送中',
    color: '#108ee9'
  },
  {
    key: 1,
    title: '发送成功',
    color: '#87d068'
  },
  {
    key: 2,
    title: '发送失败',
    color: '#f50'
  }
]
export default {
  components: {
    Pagination
  },
  data() {
    return {
      INFORMLIST,
      tableLoading: false,
      modalLoading: false,
      size: 0,
      isCurrent: true,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          align: 'center',
          width: 100,
        },
        {
          title: '通知类型',
          dataIndex: 'type',
          align: 'center',
          width: 100
        },
        {
          title: '通知状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: {
            customRender: 'status'
          },
          align: 'center',
          width: 100
        },
        {
          title: '通知对象',
          dataIndex: 'notifyObject',
          align: 'left'
        },
        {
          title: '接收人(电话)',
          dataIndex: 'receiver',
          key: 'receiver',
          scopedSlots: {
            customRender: 'receiver'
          },
          align: 'left'
        },
        {
          title: '车牌',
          dataIndex: 'licensePlateNumber',
          key: 'licensePlateNumber',
          scopedSlots: {
            customRender: 'licensePlateNumber'
          },
          align: 'center'
        },
        {
          title: '发送时间',
          dataIndex: 'createTime',
          key: 'createTime',
          scopedSlots: {
            customRender: 'createTime'
          },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ],
      notifyTypeList: [],
      tableData: [],
      searchCondition: {
        searchClk: 0,
        type: undefined,
        status: undefined
      },
      apiRequest: apiMessageQuery,
      detailObj: {
        show: false,
        title: '',
        data: {},
      },
      scanObj: {
        show: false,
        data: {
          scanList: []
        }
      }
    }
  },
  mounted() {
    this.getNotifyType();
    this.onQueryClk();
  },
  filters: {
    timeFilter(value, str) {
      let time = '';
      let date = new Date(value);
      let y = date.getFullYear();
      let M = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      switch (str) {
        case '年月日':
          time = y + '-' + M + '-' + d;
          break;
        case '年月日时分':
          time = y + '-' + (M < 10 ? '0' + M : M) + '-' + d + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m)
      }
      return time;
    }
  },
  methods: {
    returnRow(row){
      return {
       on:{
        click:(evt)=>{
          this.viewDetail(row)
        }
       }
      }
    },
    disopseData(str){
      if(!str) return;
      let list = str.split(',')
      return list.map((ele)=>`<p>${ele}</p>`).join('')
    },
    closeScanObjModal() {
      this.$refs.scanningCondition.removeEventListener("scroll", this.handleScroll);
      this.scanObj.show = false;
      this.isCurrent = true;
    },
    /**
     * 获取参数
      */
    getNotifyType() {
      apiGetNotifyType().then((res) => {
        this.notifyTypeList = res.data.data.map((ele) => {
          return {
            value: ele,
            label: ele
          }
        });
      })
    },
    handleScroll() {
      let el = this.$refs.scanningCondition;
      if (el.scrollHeight - (el.scrollTop + el.clientHeight) < 100) {
        this.viewScanning()
      }
    },
    /**
     * 扫描情况
    */
    viewScanning() {
      if (!this.isCurrent) return;
      let size = ++this.size
      this.modalLoading = true;
      apiGetStatusInfo({ size }).then((res) => {
        let list = [];
        let obj = res.data.data;
        for (let key in obj) {
          list.push({
            value: key,
            flag: obj[key]
          })
        }
        this.isCurrent = !!list.length;
        this.scanObj.data.scanList = this.scanObj.data.scanList.concat(list.reverse())
        this.scanObj.show = true;
        this.$nextTick(() => {
          this.$refs.scanningCondition.removeEventListener("scroll", this.handleScroll)
          this.$refs.scanningCondition.addEventListener("scroll", this.handleScroll)
        })
      }).finally(() => {
        this.modalLoading = false;
      })
    },
    /**
     * 
     * @param {object} keepPage [事件对象]
     */
    onQueryClk(keepPage) {
      keepPage === true ? this.searchCondition.searchClk -= 1 : this.searchCondition.searchClk += 1
    },
    /**
     * 关闭弹窗
      */
    closeModal() {
      this.detailObj.show = false;
    },
    /**
     * 查看详情
      */
    viewDetail(data) {
      this.detailObj.title = `查看短信信息`;
      let params = {
        messageId: data.id
      }
      apiQuerySMSByMessageId(params).then((res) => {
        this.detailObj.data = res.data.data;
        this.detailObj.show = true;
      })
    }
  }
}
</script>

<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

.th-class {
  width: 16%;
}

.condation {
  padding: 20px;
  flex-wrap: wrap;
}

.flex-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.condation-item {
  margin-top: .2rem;
  margin-right: .7813rem;
  display: flex;
  align-items: center;
  .ant-btn {
    margin: 0 8px;
  }
}

.item-label {
  margin-right: .3rem;
  white-space: nowrap;
}

.article-box {
  padding: 1rem;
}

.flex-box {
  display: flex;
}

.a-link {
  color: #40a9ff;
  cursor: pointer;
}

.modal-class {
  flex-wrap: wrap;

  .modal-item {
    width: 50%;
    border: 1px solid #fafafa;
  }

  .modal-label {
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(166, 211, 247, 0.1);
  }

  .modal-value {
    box-sizing: border-box;
    padding: 20px;
    flex: 1;
  }
}

.scan-class {
  /deep/.ant-modal {
    .ant-modal-body {
      padding: 0px;
    }
  }
}

// grid 布局
.grid-class {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  max-height: 300px;
  box-sizing: border-box;
  padding: 10px 20px;
  grid-gap: 10px;
  overflow: hidden;
  overflow-y: auto;
  grid-template-columns: repeat(10, 45px);

  .number-class {
    padding: 5px;
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 3px 1px rgba(121, 121, 121, .5)
  }
}

.scan-active {
  background: #40a9ff;
  color: #fff;
}
.table-class{
  /deep/.white-space{
    white-space: nowrap;
  }
}

.body-header {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .11);
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .1);
}
</style>
